#logs {
    height: calc(100svh - 4rem - 10rem - 4rem - 4px); // padding + height + border
    font-family: monospace;
    border: 1px solid #304562;
    overflow-y: scroll;
    overflow-x: hidden;

    @media (min-width: 768px) {
        height: calc(100vh - 4rem - 9rem - 4rem - 4px); // padding + height + border
    }

    > div {
        max-width: 100%;
        line-break: anywhere;
        font-family: 'Courier New', Courier, monospace;
    }
}

.is-expanded {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background: var(--surface-overlay);

    #logs {
        height: calc(100svh - 4rem - 2rem - 4rem - 4px); // padding + height + border

        @media (min-width: 768px) {
            height: calc(100vh - 4rem - 4rem - 4px); // padding + height + border
        }
    }
}

.ansi-red { color: #ff0000; }
.ansi-green { color: #00ff00; }
.ansi-yellow { color: #ffff00; }
.ansi-blue { color: #0000ff; }
.ansi-magenta { color: #ff00ff; }
.ansi-cyan { color: #00ffff; }
.ansi-white { color: #ffffff; }
